<template>
  <div style="height: 6vh;padding:10px 20px;  background-color: #fff;">
    <span style="line-height: 60px;font-size: 20px;">草稿箱</span>
<!--    <el-button type="primary" style="float: right;margin-top: 10px;" @click="dialogVisible=true">新建公告</el-button>-->
  </div>

  <!-- 公告搜索卡片 -->
  <el-card style="background-color: #fff;margin:10px 10px;">
    <el-form :inline="true">
      <el-form-item label="公告标题">
        <el-input v-model="searchNoticeForm.title" placeholder="请输入公告标题" style="width: 160px;"
               @keydown.enter="loadNoticeDrafts"></el-input>
      </el-form-item>

      <el-form-item label="公告类型">
        <el-select v-model="searchNoticeForm.type" placeholder="请选择公告类型" style="width: 150px;"
                   @keydown.enter="loadNoticeDrafts">
          <el-option label="次要" value="0"></el-option>
          <el-option label="一般" value="1"></el-option>
          <el-option label="重要" value="2"></el-option>
          <el-option label="紧急" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="请选择日期">
        <el-date-picker v-model="searchNoticeForm.date" type="datetime" placeholder="请选择日期"
                        @keydown.enter="loadNoticeDrafts">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button style="background-color: #00AEEc;color: #fff;" @click="loadNoticeDrafts">
          <el-icon>
            <Search/>
          </el-icon>
          <span style="padding-left: 5px;">搜索</span>
        </el-button>
        <el-button style="background-color: #f0c24c;color: #fff;" @click="resetSearch">
          <el-icon>
            <RefreshRight/>
          </el-icon>
          <span style="padding-left: 5px;">重置</span>
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--公告列表表格  -->
  <el-card style="margin: 10px;">
    <el-table :data="noticeArr" v-loading="loading">
      <el-table-column type="selection" width="45" align="center"></el-table-column>
      <el-table-column type="index" label="ID" align="center" width="80px"></el-table-column>
      <el-table-column label="标题" prop="title" align="center" width="300px" show-overflow-tooltip></el-table-column>
      <el-table-column label="类型" prop="type" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="发布者" prop="createPeople" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="250px">
        <template #default="scope" >
          <el-button type="success" @click="editNotice(scope.row.id)">编辑</el-button>
          <el-button type="primary" @click="sendNotice(scope.row.id)">发布</el-button>
          <el-button type="danger" @click="deleteNotice(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>
<script setup>
//定义变量，保存搜索栏的信息
import {onMounted, ref} from "vue";
import qs from "qs";
import router from "@/router";
import axios from "axios";

const searchNoticeForm = ref({
  title: '',
  type: '',
  date: ''
})
//公告数据列表
const noticeArr=ref([]);
//加载动画
const loading=ref(true);
//搜索栏点击事件：加载草稿箱中公告的方法
const loadNoticeDrafts = () => {
  loading.value=true;
  console.log(searchNoticeForm.value);
  let data = qs.stringify(searchNoticeForm.value);
  noticeArr.value = [
    {
      index: '1',
      title: 'JetBrains全新UI正式官宣标配！',
      type: '一般',
      status: '未发布',
      createPeople: 'Lisa',
      createTime: '2024-07-20'
    },
    {
      index: '2',
      title: '华为余承东回应「25 亿元转让问让问界」；鸿蒙 PC 版现身华为开发者官网；Linux Kernel 6.10释出 | 极客头条',
      type: '一般',
      status: '未发布',
      createPeople: '李华',
      createTime: '2024-07-19'
    }
  ];
  loading.value=false;
};
onMounted(()=>{
  loadNoticeDrafts();
})
const resetSearch=()=>{
  searchNoticeForm.value={};
  loadNoticeDrafts();
}
//编辑未发布的草稿箱中的公告
const editNotice=(id)=>{
  //将当前已有数据传到编辑页面中
  //跳转到编辑页面
  router.push('/editNotice');
}
//发布草稿箱中的公告
const sendNotice=(id)=>{
  if (confirm('您确认要发布当前的公告吗？')){
    //根据id发布当前的公告
    // axios.post(BASE_URL+'/v1/notice/save?id='+id)
  }
}
//删除当前公告
const deleteNotice=(id)=>{
  if (confirm('您确认要删除当前公告吗？')){
    // axios.post(BASE_URL+'/v1/noticeDrafts/delete/'+id)
  }
}
</script>


<style scoped>

</style>